<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>插槽的基本使用</title>
  </head>
  
<body>
  <div id="root">
    <!-- 使用的是实例里面的isShow -->
    <cpn v-show="isShow"></cpn>
    <!-- 在控制台中可以进行测试   vm.isShow = false -->

    <!-- 在模板中使用变量v-show\v-for中的names -->
    <!-- 在查找变量names的时，都看一下names变量在哪一个模板里面 -->
    <!-- 不关心现在使用使用的哪一个组件，例如：不关心cpn -->
    <cpn v-for="item in names"></cpn>
    <!-- 还是把cpn当成一个普通的div去使用 -->
  </div>
  
  <template id="cpn">
    <div>
      <button v-show="isShow">按钮</button>
    </div>
  </template>
  
  <script src="js/vue.js"></script>
  <script>

    const vm = new Vue({
      el: '#root',
      data: {
        message: 'Vue.js',
        isShow: true
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              isShow: false
            }
          }
        }
      }
    })
  </script>
</body>

</html>
